<template>
    <!-- <div style="height: calc(100vh - 50px)"> -->
<!-- <div> -->

    <!-- <mapgis-ui-affix :offsetTop="10" :offsetBottom="10" style="position:absolute;z-index: 10;">
            <mapgis-ui-button type="primary" @click="togglePanel('measurePanelVisible','')">固定位置</mapgis-ui-button>
    </mapgis-ui-affix>     -->

    <mapgis-web-map
       crs="EPSG:3857"
      :center="[125.3,43.85]"
      :zoom="10"
    >
    <!-- :mapStyle='{"version":8,"sources":{},"layers":[{"id":"背景","type":"background","paint":{"background-color":"rgba(0, 0, 0, 0.5)"}}]}' -->
        
        <mapgis-rastertile-layer
            layerId="tdt002"
            url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
        />
        <mapgis-rastertile-layer
            layerId="myDiTu"
            url="https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e&sch=wmts"
        />       
        
        <mapgis-ui-affix :offsetTop="10" :offsetBottom="10" style="position:absolute;z-index: 10;">
            <mapgis-ui-button type="primary" @click="hawkeyeOpenOrNot = !hawkeyeOpenOrNot">固定位置</mapgis-ui-button>
        </mapgis-ui-affix> 

        <mapgis-fullscreen position="bottom-left" />

        <div v-show="hawkeyeOpenOrNot">
            <mapgis-hawkeye />
        </div>
        
        <mapgis-custom-scale
            :outStyle='{"position":"absolute","zIndex":900,"left":"10px","bottom":"10px","maxHeight":"300px","width":"220px"}'
            />

           
    
        <!--地图Div-->
        <!-- <div class="map-display" id="mapDiv">
        </div> -->
        
        <!--地图左上角按钮栏-->
        <div id="myToolBtns" class="mytool-btns">
            <div id="buttonDiv" style="float: left;">
                <div class="navbtn-items" v-if=layerShow  @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn"> <!-- @click="togglePanel('lyrPanelVisible','layerFlag')"-->
                    <img src="../../assets/images/map_icons/layer.png">
                    <img v-show="layerFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
                    <img src="../../assets/images/map_icons/measure.png">
                    <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="地图整饰控制" id="decorateBtn">
                    <img src="../../assets/images/map_icons/Decorate.png">
                    <img v-show="decorateFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

                <div class="navbtn-items" v-if=attrQueryPanelShow @click="togglePanel('attrQueryPanelVisible','attrQueryFlag')" title="属性查询" id="attrQueryBtn">
                    <img src="../../assets/images/map_icons/shuxing.png">
                    <img v-show="attrQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=geometryQueryPanelShow @click="togglePanel('geometryQueryPanelVisible','geometryQueryFlag')" title="几何查询" id="geometryQueryBtn">
                    <img src="../../assets/images/map_icons/kongjian.png">
                    <img v-show="geometryQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <!--<div class="navbtn-items" v-if=distanceQueryPanelShow @click="togglePanel('distanceQueryPanelVisible','distanceQueryFlag')" title="距离查询" id="distanceQueryBtn">
                  <img src="../../assets/images/map_icons/juli.png">
                  <img v-show="distanceQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
                       class="item-selected">
                </div>-->
                <div class="navbtn-items" v-if=bufferAnalystPanelShow @click="togglePanel('bufferAnalystPanelVisible','bufferAnalystFlag')" title="缓冲区分析" id="bufferAnalystBtn">
                    <img src="../../assets/images/map_icons/huanchongqu.png">
                    <img v-show="bufferAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

                <div class="navbtn-items" v-if=heatMapAnalystPanelShow @click="togglePanel('heatMapAnalystPanelVisible','heatMapAnalystFlag')" title="热力图" id="heatMapAnalystBtn">
                    <img src="../../assets/images/map_icons/relitu.png">
                    <img v-show="heatMapAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=clusterLayerPanelShow @click="togglePanel('clusterLayerPanelVisible','clusterLayerFlag')" title="聚类" id="clusterLayertBtn">
                    <img src="../../assets/images/map_icons/cluster.png">
                    <img v-show="clusterLayerFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>
                <div class="navbtn-items" v-if=thiessenAnalystPanelShow @click="togglePanel('thiessenAnalystPanelVisible','thiessenAnalystFlag')" title="泰森多边形" id="thiessenAnalystBtn">
                    <img src="../../assets/images/map_icons/duobianxing.png">
                    <img v-show="thiessenAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
                         class="item-selected">
                </div>

            </div>
        </div>

        <!--图层管理面板-->
        <div class="layerBox" :class="{'layer-hide':lyrPanelVisible}" :id="lyrBox">
            <div id="panelHeader">
                <div class="options lyropt">
                    <span style="font-weight: bold;font-size: 1.2em;">图层管理面板</span>
                    <!-- <el-checkbox  style="color: black; float: right;">图层透明度调节</el-checkbox> -->
                </div>
            </div>
        </div>
        <!-- @change="handleOpt" -->

        <!--“量测”下拉-->
        <div class="mapMeasurementTools" :class="{'layer-hide':measurePanelVisible}">    <!--tool-item-panel v-if="measurePanelVisible"-->
            <div class="map-tool-item" title="测面积" id="myMeasureArea">  <!--@click="myMeasureArea" @click="triggerBus('area')"-->
                <img src="../../assets/images/map_icons/Area.png" />
                <span>面积</span>
            </div>
            <div class="map-tool-item" title="测距离" id="myMeasureDistance">    <!-- @click="myMeasureDistance" @click="triggerBus('distance')"-->
                <img src="../../assets/images/map_icons/Distance.png" />
                <span>距离</span>
            </div>
            <div class="map-tool-item" title="清除量测结果" id="myClearMeasure">  <!--@click="myClearMeasure" @click="triggerBus('clean')"-->
                <img src="../../assets/images/map_icons/清空.svg" />
                <span>清除</span>
            </div>
        </div>
        

        <!--“整饰”下拉-->
        <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
            <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
                <img src="../../assets/images/map_icons/Coordinate.png">
                <span>坐标</span>
            </div>
            <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
                <img src="../../assets/images/map_icons/Scale.png">
                <span>比例尺</span>
            </div>
        </div>

        <!--坐标与比例尺-->
        <div class="coordinateAndScaleBar">
            <!--地图比例尺-->
            <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
                <div id="scaleBar"></div>
            </div>
            <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
            <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
        </div>

        <!--进度条-->
        <div id="preview">
            <img src="../../assets/images/waiting.gif" alt='' /><br />
            <br />
            <span>正在查询/分析，请稍候……</span>
        </div>

        <!--属性查询-->
        

        <!--几何空间查询-->
        

        <!--缓冲区分析面板-->
        <div :class="{'layer-hide':bufferAnalystPanelVisible}" id="hcqfx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>缓冲区分析面板</h3>
            <!--缓冲半径：<input type="text" v-model="buffer_radius" />  &lt;!&ndash;:value="buffer_radius"&ndash;&gt;-->
            <label style="width: 54px;line-height: 17px">（单圈）缓冲半径:</label>
            <br />
            <input id="bufferRadius" type="range" min="100" max="100000" step="1" v-model="buffer_radius" />
            {{ this.buffer_radius}} m
            <br />  <br />
            <input id="bufferRadiusForMul" type="text" v-model="radiusStr" /> &nbsp; m
            <br /> <br />
            <input type="button" id="bufferOneRing" value="开始分析（单圈）"/>
            &nbsp;&nbsp;&nbsp;
            <input type="button" id="bufferMulRings" value="开始分析（多圈）"/>
            <br/>
        </div>

        <!--热力图分析面板-->
        <div :class="{'layer-hide':heatMapAnalystPanelVisible}" id="rlt" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>热力图分析面板</h3>
            <label style="width: 54px;line-height: 17px">热力半径:</label><input id="radius" type="range" min="10" max="100" step="1" v-model="heatmap_radius" value="500" />   <!--value="10"-->
            {{ this.heatmap_radius}} m
            <!--热点半径：<input type="text" v-model="heatmap_radius" /> &lt;!&ndash;:value="heatmap_radius"&ndash;&gt;-->
            <br/>
            <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="10" max="100" step="1" v-model="heatmap_blur" />   <!--value="10"-->
            {{ this.heatmap_blur}} m
            <!--模糊尺寸：<input type="text" v-model="heatmap_blur" />  &lt;!&ndash;:value="heatmap_blur"&ndash;&gt;-->
            <br/> <br/>
            <input type="button" id="heatMapAnalyst" value="开始分析"/>
            &nbsp;&nbsp;&nbsp;
            <input type="button" id="heatMapClear" value="清除"/>
            <br/>
        </div>

        <!--聚类图显示-->
        

        <!-- 泰森多边形分析面板-->
        <div :class="{'layer-hide':thiessenAnalystPanelVisible}" id="tsdbx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
            <h3>泰森多边形分析面板</h3>
            参数设置：<input type="text" value="10"/>
            <input type="button" id="thiessenAnalyst" value="开始分析"/>
            <br/>
        </div>


    </mapgis-web-map>

<!-- </div> -->

    <!-- </div> -->
</template>

<script>
    // import 'ol/ol.css';
    // import 'ol-ext/dist/ol-ext.css';

    // import {Map,View,Overlay,Feature} from 'ol';
    // import { Tile, Group, Image, Vector as lVector, VectorTile as lVectorTile, Heatmap as lHeatMap } from 'ol/layer'
    // import {XYZ, Vector, Cluster} from 'ol/source'
    // import { fromLonLat, toLonLat, get as projGet, getPointResolution } from 'ol/proj'
    // import { GeoJSON } from 'ol/format'
    // import {Draw,Select} from 'ol/interaction'
    // import { Style, Fill, Stroke, Circle, Text, Circle as CircleStyle, Icon, RegularShape } from 'ol/style'
    // import {defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
    // import { createStringXY } from 'ol/coordinate'
    // import {Point,LineString,Polygon} from 'ol/geom'

    // import Popup from 'ol-ext/overlay/Popup'
    // import LayerSwitcher from 'ol-ext/control/LayerSwitcher'

    // import { getArea, getLength } from 'ol/sphere'
    // import { unByKey } from 'ol/Observable'

    export default {
        name:'MyGISMap02',
        components: {
        },
        props: {
            mapCtrlTools:{
                type:Array,
                default:function () {
                    return []
                }
            },
            // lyrdata: {
            //     type: Array,
            //     default: []
            // },
            // mapParams: {
            //     type: Object,
            //     default: {}
            // },
            
        },
        data () {
            return {

                hawkeyeOpenOrNot: true,
                /**地图各悬浮面板的可视状态**/
                lyrPanelVisible:true,  //默认true为隐藏
                //legendDivVisible:true,  //默认true为隐藏
                measurePanelVisible:true, //默认true为隐藏
                decoratePanelVisible:true, //默认true为隐藏
                attrQueryPanelVisible:true, //默认true为隐藏
                geometryQueryPanelVisible:true, //默认true为隐藏
                distanceQueryPanelVisible:true, //默认true为隐藏
                bufferAnalystPanelVisible:true, //默认true为隐藏
                thiessenAnalystPanelVisible:true, //默认true为隐藏
                heatMapAnalystPanelVisible:true, //默认true为隐藏
                clusterLayerPanelVisible:true, //默认true为隐藏

                //hawkeyePanelVisible:true, //默认true为隐藏
                //orderLayerDialogVisible:true,  //默认true为隐藏
                //newLayerDialogVisible:true,  //默认true为隐藏
                //juanlianPanelVisible:true,  //默认true为隐藏
                //ftTreeSelectVisible:true,  //默认true为隐藏
                coordinateShow: true, //2D坐标,默认false不显示
                scaleShow: true, //显示比例尺,默认false不显示
                /**地图左上角-功能启动图标按钮-初始化控制**/
                layerShow:true,//图层控制-功能启动图标按钮，默认false不显示
                //legendShow:false,//图例-功能启动图标按钮，默认false不显示
                measureShow:true,//测量工具-功能启动图标按钮，默认false不显示
                //hawkEyeShow:false,//鹰眼-功能启动图标按钮，默认false不显示
                decorateShow:true,//鹰眼-功能启动图标按钮，默认false不显示
                //juanlianShow:false,//卷帘-功能启动图标按钮，默认false不显示
                //regionShow:false,//区域选择树-功能启动图标按钮，默认false不显示
                //attrTableShow:false,//属性表格-功能启动图标按钮，默认false不显示
                //mapQueryShow:false,//地图查询-功能启动图标按钮，默认false不显示
                //modelBuildingShow:false,//模型构建与空间分析-功能启动图标按钮，默认false不显示
                //statisticalAnalysisShow:false,//统计分析-功能启动图标按钮，默认false不显示
                attrQueryPanelShow:true,//属性查询-功能启动图标按钮，默认false不显示
                geometryQueryPanelShow:false,//几何空间查询-功能启动图标按钮，默认false不显示
                distanceQueryPanelShow:false,//距离查询-功能启动图标按钮，默认false不显示
                bufferAnalystPanelShow:false,//缓冲区分析-功能启动图标按钮，默认false不显示
                thiessenAnalystPanelShow:false,//(数据集)泰森多边形分析-功能启动图标按钮，默认false不显示
                heatMapAnalystPanelShow:false,//热力图分析-功能启动图标按钮，默认false不显示
                clusterLayerPanelShow:false,//聚类图-功能启动图标按钮，默认false不显示

                layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
                //legendFlag: false, //图例选中显示红色小标志，默认false为隐藏
                measureFlag:false, //测量选中显示红色小标志，默认false为隐藏
                //hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
                decorateFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
                //juanlianFlag:false, //卷帘选中显示红色小标志，默认false为隐藏
                //regionFlag:false, //区域选中显示红色小标志，默认false为隐藏
                //dtcxFlag:false, //地图查询选中显示红色小标志，默认false为隐藏
                //attrTableFlag:true, //属性表格选中显示红色小标志，默认为true显示
                //modelFlag:false, //属性表格选中显示红色小标志，默认false为隐藏
                attrQueryFlag:false, //属性查询-选中显示红色小标志，默认false为隐藏
                geometryQueryFlag:false, //几何空间查询-选中显示红色小标志，默认false为隐藏
                distanceQueryFlag:false, //距离查询-选中显示红色小标志，默认false为隐藏
                bufferAnalystFlag:false, //缓冲区分析-选中显示红色小标志，默认false为隐藏
                thiessenAnalystFlag:false, //(数据集)泰森多边形分析-选中显示红色小标志，默认false为隐藏
                heatMapAnalystFlag:false, //热力图分析-选中显示红色小标志，默认false为隐藏
                clusterLayerFlag:false, //聚类图-选中显示红色小标志，默认false为隐藏

                //measureUrl:"https://iserver.supermap.io/iserver/services/map-world/rest/maps/World?prjCoordSys=%7B%22epsgCode%22:3857%7D",
                measureVectorLayer:null,
                measureInteraction:null,
                measureSource:null,
                measureFeature:null,

                highLightLayer: {},//用于高亮的图层
                highLightVector: {},//highLightLayer图层的源
                highLightStyle: {},//highLightLayer图层的style

                location_blue:"",
                location_green:"",

                //属性查询数据
                options: [
                    {
                        value: '北京市',
                        label: '北京市'
                    }, {
                        value: '天津市',
                        label: '天津市'
                    }, {
                        value: '河北省',
                        label: '河北省'
                    }, {
                        value: '黑龙江省',
                        label: '黑龙江省'
                    }, {
                        value: '吉林省',
                        label: '吉林省'
                    }, {
                        value: '辽宁省',
                        label: '辽宁省'
                    }, {
                        value: '河南省',
                        label: '河南省'
                    }, {
                        value: '山东省',
                        label: '山东省'
                    }, {
                        value: '广东省',
                        label: '广东省'
                    }, {
                        value: '广西',
                        label: '广西'
                    }, {
                        value: '宁都县',
                        label: '宁都县'
                    }, {
                        value: '于都县',
                        label: '于都县'
                    }, {
                        value: '兴国县',
                        label: '兴国县'
                    }, {
                        value: '会昌县',
                        label: '会昌县'
                    }, {
                        value: '寻乌县',
                        label: '寻乌县'
                    }, {
                        value: '石城县',
                        label: '石城县'
                    }, {
                        value: '瑞金市',
                        label: '瑞金市'
                    }, {
                        value: '章贡区',
                        label: '章贡区'
                    }
                ],

                options2:[
                    {
                        value: '政界',
                        label: '政界'
                    }, {
                        value: '工商界',
                        label: '工商界'
                    }, {
                        value: '教育文化卫生',
                        label: '教育文化卫生'
                    }
                ],
                value1: [],
                value2: [],

                attQueryConditions:"NAME like '%区%'",

                //热力图
                heatmap_radius: 45, //热力图-热点半径；默认45
                heatmap_blur: 70, //热力图-模糊尺寸；默认70

                //缓冲区分析
                buffer_radius:20000, //（单圈）缓冲半径，默认20000米
                radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径

                //地图量测
                drawSource: {},//图层数据源
                drawVector: {},//图层

            }
        },
        methods:{
            togglePanel(attr,attr2){
                this[attr] = !this[attr];
                this[attr2] = !this[attr2];
            },           

            //地图中的面板可拖动
            dragFunc(id) {
                var Drag = document.getElementById(id);
                Drag.onmousedown = function(event) {
                    var ev = event || window.event;
                    event.stopPropagation();
                    var disX = ev.clientX - Drag.offsetLeft;
                    var disY = ev.clientY - Drag.offsetTop;
                    document.onmousemove =
                        function(event) {
                            var ev = event ||
                                window.event;
                            Drag.style.left = ev.clientX - disX + "px";
                            Drag.style.top = ev.clientY -
                                disY + "px";
                            Drag.style.cursor = "move";
                        };
                };
                Drag.onmouseup = function () {
                    document.onmousemove = null;
                    this.style.cursor = "default";
                };
            }
        },
        created(){
            //region 地图左上角-功能启动图标按钮-初始化控制
            if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
                this.mapCtrlTools.forEach(item=>{
                    if(item === 1){
                        this.layerShow = true; //图层控制-功能启动图标按钮
                    }else if(item === 2){
                        this.measureShow = true; //测量工具-功能启动图标按钮
                    }else if(item === 3){
                        this.decorateShow = true; //地图整饰-功能启动图标按钮
                    }
                    else if(item === 4){
                        this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
                    }else if(item === 5){
                        this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
                    }
                    else if(item === 6){
                        this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
                    }
                    else if(item === 7){
                        this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
                    }
                    else if(item === 8){
                        this.clusterLayerPanelShow = true; //聚类图-功能启动图标按钮
                    }
                    else if(item === 9){
                        this.thiessenAnalystPanelShow = true; // (数据集)泰森多边形分析-功能启动图标按钮
                    }
                });
            }
            //endregion
        },
        mounted(){
            /*地图初始化*/
            //this.initMyMap();
            /*让地图中的某些面板可拖动*/
            //this.dragFunc(this.lyrBox);
            //this.dragFunc("sxcx"); //属性查询面板-可拖动
            //this.dragFunc("jhcx"); //几何分析面板-可拖动
            //this.dragFunc("hcqfx"); //缓冲区分析面板-可拖动
            //this.dragFunc("rlt"); //热力图面板-可拖动
            //this.dragFunc("jlt"); //聚类图面板-可拖动
            //this.dragFunc("tsdbx"); //泰森多边形分析面板-可拖动
        },
        watch:{},
        computed:{
            lyrBox: function () {
                return 'lyrBoxDiv' + new Date().valueOf()
            },
            tdt: function () {
                return 'abcabc' + new Date().valueOf()
            }
        }
    }
</script>

<style scoped>

    /* @import '../../assets/styles/my-ol-ext.css'; */

    .map-display {
        position: absolute;
        width: 100%;
        height:100%;
        background-color: darkgray;
    }

    /*地图工具栏相关样式  */
    .mytool-btns{
        position: relative;
        /*left: 10px;*/
        margin-left:2.5em;
        top: 10px;
        height: 60px;
        /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
        width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
        z-index: 2;
    }

    .navbtn-items{
        float: left;
        margin: 0 5px;
        /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        text-align: center;
    }

    .navBtnDiv{
        /*width: auto;*/
        /*background-color:rgba(0,0,0,0);*/
        margin-left: 55px;
        /*margin-top: 5px;*/
    }
    .navbtn-btn{
        margin-right: 10px;
    }

    .navbtn-items:hover{
        cursor: pointer;
    }

    .navbtn-items>img{
        width:36px;
        height:36px;
        padding:5px;
    }
    .item-selected {
        position: absolute;
        width: 25px !important;
        height: 25px !important;
        left: 15px !important;
        bottom: 0;
    }

    .layer-hide {
        display:none;
    }

    /*右侧工具条对应面板*/
    /*工具项：图层管理&ndash;&gt;>对应面板*/
    .layerBox {
        width: 275px;
        padding: 5px;
        background-color: #ffffff;
        border: solid 1px #cecdd2;
        color: black;
        border-radius: 5px;
        /*display: none;*/ /*交由vue变量去控制*/
        position: absolute;
        z-index: 3;
        margin-left: 2.5em;
        box-shadow: 4px 4px 10px #888888;
    }

    #panelHeader {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        /* overflow-x: auto; */
    }

    .lyr-panel-title {
        text-align: center;
        font-size: 1.1em;
        line-height: 1.1em;
        display: block;
        font-weight: bold;
        color: white;
        margin: 0.3em;
    }

    .lyropt {
        font-size: 14px;
        margin-left: 10px;
    }

    /*20210929增加，调控图层面板的显示条目*/
    .layerTree{
        padding-inline-start: 15px;
    }
    .layerTree li {
        list-style: none;
        margin: 5px 10px;
        font-size: 12px;
    }
    li .layer{
        position: absolute;
        margin-top: 0px;
    }



    /*工具栏-（量测-整饰-控制-查询等）下拉框*/
    /*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
    .map-tool-item{
        width: 85px;
        height: 29px;
        border-bottom: 1px solid #b4b4b4;
        cursor: pointer;
    }

    .map-tool-item>img{
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        margin-left: 5px;
    }

    .map-tool-item>span{
        display: block;
        float: left;
        width: 50px;
        height: 20px;
        margin-top: 4px;
        margin-left: 2px;
        line-height: 19px;
        text-align: center;
        font-size:12px;
        font-family:微软雅黑;
    }

    .map-tool-item-click{
        /*color: rgb(18,150,219);*/
        color: rgb(255,0,0);
    }
    /*工具项：量测-->>对应下拉面板*/
    .mapMeasurementTools{
        position:relative;

        width: 85px;
        left: 6em;

        background-color: #ffffff;
        box-shadow: 4px 4px 10px #888888;
        z-index: 5; /*高于lyrBox的3*/
    }

    /*工具项：整饰-->>对应下拉面板*/
    .mapDecorateTools{
        position:relative;
        width: 85px;
        left: 10em;
        background-color: #ffffff;
        box-shadow: 4px 4px 10px #888888;
        z-index: 4; /*高于lyrBox的3*/
    }

    /*地图整饰（坐标、比例尺、图例均通用）*/
    .map-decorate {
        position: absolute;
        z-index: 2;
    }
    /*比例尺位置*/
    /*用于覆盖原生比例尺的样式*/
    .ol-scale-line {
        background: #f39c12;
        border-radius: 4px;
        bottom: 8px;
        left: -20em; /*约等于16px*20=320px*/
        padding: 2px;
        position: absolute;
        height: 26px;
    }
    .map-scalebar{
        position:absolute;
        bottom:6px;
        left:10em;
    }
    /*坐标位置*/
    .map-coordinate{
        left:315px;
        /*right:105px;*/
        bottom:15px;
        /*top:10px;*/
        margin:2px 6px;
        padding: 2px 4px;
        font-family:Arial;
        color:#ffffff;
        background-color: #f39c12;
        /*min-width: 150px;*/
        border-radius: 4px;
        height: 20px;
    }

    /*进度条*/
    #preview
    {
        height: 100px;
        width: 100px;
        position: absolute;
        display: none;
        text-align: center;
        font-weight: bold;
        left: 50%;
        right: 0;
        top:50%;
        bottom:0;
        margin-left: -50px;
        margin-right: auto;
        margin-top:-50px;
        margin-bottom:auto;
        z-index: 1000;
    }

    .conditionControl {
        position: absolute;
        bottom: 5px;
        width: 200px;
        height: 160px;
        right: 10px;
        top: 5px;
        /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
        z-index: 2001;
        color: #ffffff;
        background-color: #4c4e5a;
        /*边缘的宽度*/
        border-width: 10px;
        /*圆角的大小 */
        border-radius: 10px;
        /*边框颜色*/
        border-color: #000 #000 #000 #000;
    }

</style>
